<script setup>
defineProps({
  title: String,
  score: [String, Number]
})
</script>

<template>
  <div class="co-bg">
    <div class="co-score">{{ score }}</div>
    <div class="co-name" v-html="title"></div>
    <div class="co-list">
      <div class="co-item">
        <img src="../assets/offset-max.png">
        <span class="coi-title">与最大值偏差</span>
        <span class="coi-value">3%</span>
      </div>
      <div class="co-item">
        <img src="../assets/offset-min.png">
        <span class="coi-title">与最小值偏差</span>
        <span class="coi-value">3%</span>
      </div>
      <div class="co-item">
        <img src="../assets/offset-avg.png">
        <span class="coi-title">与平均值偏差</span>
        <span class="coi-value">3%</span>
      </div>
    </div>
  </div>
</template>



<style scoped>
.co-bg {
  margin: 0 108px 28px 0;
  background: url("../assets/bg-unit-one.png") no-repeat;
  background-size: 100% 100%;
  width: 281px;
  height: 108px;
  position: relative;
}
.co-score {
  width: 95px;
  height: 34px;
  font-size: 28px;
  font-family: DIN-Bold, DIN sans-serif;
  font-weight: bold;
  color: #fff;
  position: absolute;
  left: 0;
  top: 21px;
  text-align: center;
}
.co-name {
  width: 95px;
  font-size: 12px;
  line-height: 17px;
  font-family: PingFang SC-Regular, PingFang SC sans-serif;
  font-weight: 400;
  color: #fff;
  -webkit-background-clip: text;
  position: absolute;
  left: 0;
  top: 56px;
  text-align: center;
  /*white-space: pre-wrap;*/
}
.co-list {
  position: absolute;
  top: 15px;
  left: 112px;
}
.co-item {
  display: flex;
  height: 24px;
  align-items: center;
  margin-bottom: 2px;
}
.co-item img {
  width: 24px;
  height: 24px;
}
.coi-title {
  font-size: 14px;
  font-family: PingFang SC-Regular sans-serif;
  margin: 0 3px;
}
.coi-value {
  font-size: 16px;
  font-family: PingFang SC-Bold, PingFang SC sans-serif;
  font-weight: bold;
  color: #32C9D3;
}
</style>